<template>
  <!-- <div ref="myDiv" class="radar-echart" /> -->
  <v-chart class="radar-echart" :option="option" />
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
// import * as echarts from 'echarts/core'
// // 引入柱状图图表，图表后缀都为 Chart
// import {
//   RadarChart
// } from 'echarts/charts'
// // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
// import {
//   TitleComponent,
//   TooltipComponent
// } from 'echarts/components'
// // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import {
//   CanvasRenderer
// } from 'echarts/renderers'

// // 注册必须的组件
// echarts.use(
//   [TitleComponent, TooltipComponent, RadarChart, CanvasRenderer]
// )
export default {
  data() {
    return {
      option: {
        title: {
          text: '基础雷达图'
        },
        tooltip: {
          trigger: 'axis'
        },
        radar: {
        // shape: 'circle',
          indicator: [
            { name: '工作效率', max: 100 },
            { name: '考勤', max: 100 },
            { name: '积极性', max: 100 },
            { name: '帮助同事', max: 100 },
            { name: '自主学习', max: 100 },
            { name: '正确率', max: 100 }
          ]
        },
        series: [{
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          data: [
            {
              value: [10, 1, 100, 5, 100, 0],
              name: '张三'
            },
            {
              value: [50, 50, 50, 50, 50, 10],
              name: '李四'
            }
          ]
        }]
      }
    }
  },
  mounted() {
    // const myChart = echarts.init(this.$refs.myDiv)
    // myChart.setOption({
    //   title: {
    //     text: '基础雷达图'
    //   },
    //   tooltip: {
    //     trigger: 'axis'
    //   },
    //   radar: {
    //     // shape: 'circle',
    //     indicator: [
    //       { name: '工作效率', max: 100 },
    //       { name: '考勤', max: 100 },
    //       { name: '积极性', max: 100 },
    //       { name: '帮助同事', max: 100 },
    //       { name: '自主学习', max: 100 },
    //       { name: '正确率', max: 100 }
    //     ]
    //   },
    //   series: [{
    //     type: 'radar',
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     data: [
    //       {
    //         value: [10, 1, 100, 5, 100, 0],
    //         name: '张三'
    //       },
    //       {
    //         value: [50, 50, 50, 50, 50, 10],
    //         name: '李四'
    //       }
    //     ]
    //   }]
    // })
  }
}
</script>

<style>
.radar-echart {
    width: 600px;
    height: 400px;
}
</style>
